<template>
  <div class="contactsMessage">
    <el-input
      placeholder="请输入备注"
      prefix-icon="el-icon-search"
      v-model="inputRemark"
      size="mini"
      style="width: 360px"
      @keyup.enter.native="searchEmailContactsByRemark()"
    />
    &nbsp;&nbsp;&nbsp;
    <el-tooltip effect="dark" content="添加邮箱联系人" placement="left-end">
      <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="createContacts()"/>
    </el-tooltip>

    <el-table :data="emailContacts" height="474px" tooltip-effect="dark" :visible.sync="emailFormVisible">
      <el-table-column width="150" property="mailTo" label="联系人邮箱" align="center" show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="100" property="remarkName" label="备注" align="center" show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="150" property="phone" label="手机号" align="center" show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="150" property="description" label="描述" align="center" show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="110" property="createTime" label="创建日期" align="center" show-overflow-tooltip
      ></el-table-column>
      <el-table-column width="150" property="" label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)" icon="el-icon-position">发送</el-button>
          <el-button type="text" size="small" @click="selectRow(scope.row)">查看</el-button>
          <el-popconfirm title="确定删除该联系人吗？" @confirm="deleteRow(scope.row)">
            <el-button type="text" size="small" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="联系人详情" :visible.sync="emailFormVisible" style="height: 800px">
      <!--  新建企业邮箱  -->
      <el-form ref="form" :model="contactsForm" label-width="100px" style="width: 700px" :rules="theRules">
        <el-form-item label="邮箱" prop="mailTo">
          <el-input v-model="contactsForm.mailTo" :disabled="contactsForm.editTure"/>
        </el-form-item>
        <el-table-column width="200" property="phone" label="手机号" align="center" show-overflow-tooltip
        ></el-table-column>
        <el-form-item label="备注" prop="remarkName">
          <el-input v-model="contactsForm.remarkName" :disabled="contactsForm.editTure"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="contactsForm.phone" :disabled="contactsForm.editTure"/>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="contactsForm.description" :rows="5" maxlength="255"
                    show-word-limit :disabled="contactsForm.editTure"
          />
        </el-form-item>
        <template>
          <el-button type="primary" @click="updateEmailContacts()">提交</el-button>
          <el-button @click="changeDisabled()">编辑</el-button>
        </template>
      </el-form>
    </el-dialog>

    <!--  新建邮箱联系人  -->
    <el-dialog title="新建联系人" :visible.sync="contactsFormVisible" style="height: 800px">
      <!--  输入企业邮箱  -->
      <el-form ref="form" :model="recentContacts" label-width="100px" style="width: 700px" :rules="theRules">
        <el-form-item label="邮箱" prop="mailTo">
          <el-input v-model="recentContacts.mailTo"/>
        </el-form-item>
        <el-form-item label="备注" prop="remarkName">
          <el-input v-model="recentContacts.remarkName"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="recentContacts.phone"/>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="recentContacts.description" :rows="5" maxlength="255"
                    show-word-limit
          />
        </el-form-item>
        <template>
          <el-button type="primary" @click="addEmailContacts()">提交</el-button>
        </template>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {

  data() {
    return {
      emailContacts: [],
      emailFormVisible: false,
      contactsForm: {
        id: '',
        mailTo: '',
        remarkName: '',
        description: '',
        phone: '',
        editTure: true,
        updateBy: ''
      },
      inputRemark: '',
      contactsFormVisible: false,
      recentContacts: {
        mailTo: '',
        remarkName: '',
        description: '',
        phone: '',
        createBy: ''
      },
      ruleForm: [],

      //校验
      theRules: {
        mailTo: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }

  },

  mounted() {
    this.searchAllEmailContacts()
  },

  methods: {
    //向父组件传参数row.mailTo
    handleClick(row) {
      console.log('row.mailTo=' + row.mailTo)
      this.$emit('inputMailTo', true, row.mailTo)
    },
    //根据备注查找联系人
    searchEmailContactsByRemark() {
      if (this.inputRemark == '') {
        this.searchAllEmailContacts()
      }
      this.axios.post('/email/findByRemarkName/' + encodeURI(this.inputRemark)).then(res => {
        this.emailContacts = res.data
      })
    },
//新增联系人
    addEmailContacts() {
      this.loadUser()
      this.axios.post('/email/addEmailContacts', this.recentContacts).then(res => {
        if (res.msg == '200') {
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          this.contactsFormVisible = false
          this.recentContacts = {}
        }
        this.searchAllEmailContacts()
      })
    },
    deleteRow(row) {
      this.axios.post('/email/deleteEmailContacts/' + row.id).then(res => {
        if (res.msg == '200') {
          this.$message({
            message: res.data,
            type: 'success'
          })
        }
        this.searchAllEmailContacts()
      })
    },
    //查询所有邮箱联系人
    searchAllEmailContacts() {
      this.axios.post('/email/findAllEmailContacts').then(response => {
        this.emailContacts = response.data
      }).catch(
        (resp) => {
          this.$confirm('网络异常！')
        })
    },
    //查看某行联系人数据
    selectRow(row) {
      this.contactsForm.editTure = true,
        this.contactsForm.id = row.id,
        this.contactsForm.mailTo = row.mailTo,
        this.contactsForm.remarkName = row.remarkName,
        this.contactsForm.phone = row.phone,
        this.contactsForm.description = row.description,
        this.emailFormVisible = true
    },
    changeDisabled() {
      this.contactsForm.editTure = false
    },
    //更新邮箱联系人
    updateEmailContacts() {
      this.axios.post('/email/updateEmailContacts', this.contactsForm).then(response => {
        if (response.msg == '200') {
          this.$message({
            message: '更新成功',
            type: 'success'
          })
          this.emailFormVisible = false
          this.searchAllEmailContacts()
        }
        this.emailFormVisible = false
        this.searchAllEmailContacts()
      }).catch(
        (resp) => {
          this.$confirm('网络异常！')
        })
    },
    //点击新增
    createContacts() {
      this.contactsForm = {}
      this.contactsFormVisible = true
    },
    //加载当前登录的用户信息
    loadUser() {
      this.axios.get('/user/info').then(
        (resp) => {
          this.ruleForm = resp.data
          this.recentContacts.createBy = resp.data.username
          this.contactsForm.updateBy = resp.data.username
          //alert("resp.data.realName"+resp.data.password)
        }
      ).catch(
        (resp) => {
          this.$confirm('网络异常！')
        }
      )
    }
  }

}
</script>

<style>

</style>
